.PersonAttendanceListA01 {
	width: 100%;
	height: 100%;
	padding: 16px;
	display: flex;
	align-items: center;
	justify-content: center;

	& > div {
		flex: 1;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 8px;
		cursor: pointer;

		& > .List {
			margin-left: 8px;
			width: 212px;
			height: 212px;
			background: linear-gradient(
				90deg,
				rgba(36, 102, 149, 0),
				rgba(0, 29, 144, 1)
			);
			display: flex;
			align-items: flex-start;
			justify-content: center;
			flex-direction: column;
			padding: 16px;

			& > div:first-child {
				display: flex;
				align-items: flex-end;
				justify-content: center;
				margin-bottom: 8px;

				& > img {
					width: 42px;
					height: 42px;
					margin-right: 8px;
				}

				& > div {
					font-family: MicrosoftYaHei;
					font-size: 16px;
					color: #b9e4f4;
				}
			}

			& > div:last-child {
				display: flex;
				align-items: flex-start;
				justify-content: center;
				flex-direction: column;

				& > div {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 4px;

					&:first-child > div:first-child {
						background: var(--color1);
					}

					&:last-child > div:first-child {
						background: var(--color2);
					}

					&:first-child > div:nth-child(2) {
						color: var(--color1);
					}

					&:last-child > div:nth-child(2) {
						color: var(--color2);
					}

					& > div:first-child {
						width: 18px;
						height: 11px;
						margin-right: 8px;
					}

					& > div:nth-child(2) {
						font-family: YouSheBiaoTiHei;
						font-size: 18px;
						margin-right: 16px;
					}

					& > div:nth-child(3) {
						font-family: MicrosoftYaHei, MicrosoftYaHei;
						font-weight: bold;
						font-size: 18px;
						color: #ffffff;
					}
				}
			}
		}
	}
}
